<template>
    <view class="c-tabbar-box--clear">
        <view class="c-tabbar-box flex c-underline c-max-width" :style="{backgroundColor: bgColor}">
            <view class="flex-1" v-for="(item, index) in list_" :key="index" @click="changeTab(item.app_page, index)">
                <c-colors :theme="[selectIndex_ === index ? 't' : color]">
                    <view class="c-tabbar__image">
                        <c-image v-if="isImg_(item.img)" :src="selectIndex_ === index ? item.img_active : item.img" size="20px"></c-image>
                        <uni-icons v-else color="false" :type="selectIndex_ === index ? item.img_active : item.img"
                            size="20px"></uni-icons>
                    </view>
                </c-colors>
                <c-colors :theme="[selectIndex_ === index ? 't' : color]">
                    <view class="c-tabbar__text">{{item.name}}</view>
                </c-colors>
            </view>
        </view>
    </view>
</template>

<script>
    import {
        mapState
    } from 'vuex'
    export default {
        props: {
            bgColor: {
                type: String,
                default: '#fff'
            },
            color: {
                type: String,
                default: '#666'
            }
        },
        data() {
            return {
                shieldReview: false,
                newList: []
            }
        },
        computed: {
            ...mapState({
                shopConfig_: state => state.config.shopConfig
            }),
            list_() {
                let tabbarArr = [];
                if (!!this.shieldReview) {
                    // -- 审核 模式
                    tabbarArr = [{
                            app_page: 'pages/index/client',
                            img: 'newTabbar/tabBar_8.png',
                            img_active: 'newTabbar/tabBar_cur_8.png',
                            name: '商城'
                        },
                        {
                            app_page: 'pages/cart/cart',
                            img: 'newTabbar/tabBar_3.png',
                            img_active: 'newTabbar/tabBar_cur_3.png',
                            name: '购物车'
                        },
                        {
                            app_page: 'pages/user/user',
                            img: 'newTabbar/tabBar_4.png',
                            img_active: 'newTabbar/tabBar_cur_4.png',
                            name: '我的'
                        }
                    ]
                } else {
                    tabbarArr = this.shopConfig_.menu || [];
                }
                return tabbarArr;
            },
            selectIndex_() {
                return this.list_.findIndex(o => o.app_page === this.$Route.path);
            },
            isImg_() {
                return (icon) => {
                    //判断是否是图片 - strFilter必须是小写列举
                    var strFilter = ".jpeg|.gif|.jpg|.png|.bmp|.pic|.svg|"
                    if (icon.indexOf(".") > -1) {
                        var p = icon.lastIndexOf(".");
                        var strPostfix = icon.substring(p, icon.length) + '|';
                        strPostfix = strPostfix.toLowerCase();
                        if (strFilter.indexOf(strPostfix) > -1) {
                            return true;
                        }
                    }
                    return false;
                }
            }
        },
        methods: {
            changeTab(url, index) {
                if (this.selectIndex_ === index || !url) return;
                this.$Router.replace({
                    path: url
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .c-tabbar {
        &-box--clear {
            @include iosSafeArea(height, 50px, bottom);
        }

        &-box {
            @include fixed(null, 0, 0, 0);
            z-index: 998;
            @include iosSafeArea(height, 50px, bottom);
            @include iosSafeArea(padding, 0px, bottom, bottom);

            &::after {
                bottom: auto;
                top: 0;
            }

            .flex-1 {
                @include flex(column);
                align-items: center;
                padding-top: 5px;
                height: 100%;
            }
        }

        &__image {
            width: 20px;
            height: 20px;
            position: relative;
            overflow: hidden;
        }

        &__text {
            font-size: 12px;
            line-height: 20px;
            color: inherit;
        }

        &__doted {
            @include abs(0, 0);
            width: 6px;
            height: 6px;
            background-color: red;
            border-radius: 100%;
            z-index: 2;
        }
    }
</style>
